<template>
    <div class="blogArticle-list">
        <div class="card" v-for="item, index in 5" :key="index" v-if="loading">
            <el-skeleton :rows="5" animated />
        </div>
        <div class="card" v-for="item, index in articleList" :index="index" v-if="!loading">
            <div class="card-l">
                <el-image style="height: 150px; width: 150px;" :src="item.articleCover" fit="contain"></el-image>
            </div>
            <div class="card-r">
                <div>
                    <span class="title" @click="$router.push('/blog/blogArticle/' + item.articleId)">{{ item.title }}</span>
                </div>
                <div class="content"> {{ item.summary }}
                </div>
                <div class="card-bottom">
                    <div class="author">
                        <el-avatar :size="35" :src="item.avatar"></el-avatar>
                        <div class="nickname">{{ item.nickName }}</div>
                        <div class="nickname">
                            <el-blogTag size="mini" v-for="citem, cindex in item.tags" :index="cindex" class="bottom-blogTag">
                                {{tagList.find(item => parseInt(item.id) === parseInt(citem)).name}}
                            </el-blogTag>
                        </div>
                    </div>
                    <div class="op">
                        <div class="iconfont icon-liulanliang">{{ item.viewsCount }}</div>
                        <div class="iconfont icon-dianzan">{{ item.likeCount }}</div>
                        <div class="iconfont icon-pinglun">{{ item.commentCount }}</div>
                        <div class="iconfont icon-shoucang">{{ item.collectCount }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="pagination">
            <el-pagination background layout="prev, pager, next" :total="params.total" :page-size="params.pageSize"
                @current-change="handlePage">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { listFrontArticle } from '@/api/blog/blogArticle';
import { listFrontTag } from '@/api/blog/blogTag';

export default {
    name: "blog-blogArticle-list",
    data() {
        return {
            loading: false,
            articleList: [],
            params: {
                currPage: 1,
                pageSize: 10,
                total: 0,
            },
            tagList: []
        }
    },
    mounted() {
        this.getTagList();
        this.getArticleList();
    },
    methods: {
        handlePage(page) {
            this.params.currPage = page;
            this.getArticleList();
        },
        getArticleList() {
            listFrontArticle(this.params).then(res => {
                this.articleList = res.rows;
                this.params.total = res.total;
            })
        },
        getTagList() {
            listFrontTag().then(res => {
                this.tagList = res.rows;
            })
        }
    }
}
</script>

<style scoped>
.blogArticle-list {
    width: 100%;
    min-height: 100vh;
}

.card-r {
    flex: 1;
}

.title {
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
}

.title:hover {
    color: #409EFF;
}


.content {
    font-size: 15px;
    color: #566573;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    margin: 15px 0;
    height: 40px;
}

.op div {
    margin-left: 20px;
}

.author {
    display: flex;
    align-items: center;
}

.nickname {
    margin-left: 10px;
    color: rgb(69, 66, 66);
}

.bottom-blogTag {
    margin-right: 10px;
}

.pagination {
    text-align: center;
}

@media screen and (max-width: 1000px) {
    .card {
        width: 100%;
        overflow: hidden;
        margin-bottom: 20px;
        padding: 10px;
        background: #fff;
        box-shadow: 0 2px 5px 0 hsla(0, 0%, 57%, .1);
        transition: all .6s ease;
    }

    .card-bottom {
        font-size: 14px;
    }

    .card-l {
        text-align: center;
    }

    .op {
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: right;
    }


}

@media screen and (min-width: 1001px) {
    .card {
        overflow: hidden;
        margin-bottom: 20px;
        padding: 20px;
        background: #fff;
        box-shadow: 0 2px 5px 0 hsla(0, 0%, 57%, .1);
        transition: all .6s ease;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .card-bottom {
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .card-l {
        margin-right: 20px;
    }

    .op {
        display: flex;
        align-items: center;
    }


}
</style>
